<template>
  <div>
    <project-title
      :style="highlightStyle"
      :data="props.data"
      @menu-click="menuClick"
    />
  </div>
  <div class="tree-div" @mousedown.stop>
    <catalog-tree
      ref="itemTree"
      :item-data="props.data"
      :option="treeOperation"
      @delete-node="deleteNode"
      @reset-add="resetAddRoot"
    />
  </div>
  <!-- :class="{ highlighted: props.hightlightChange }" -->
  <!-- 操作二次确认弹窗 -->
  <a-modal v-model:open="open" :title="confirmInfo.title" @ok="handleOk">
    <span style="padding-left: 24px">{{ confirmInfo.content }}</span>
  </a-modal>
  <!-- 修改项目名 -->
  <project-modal
    v-model:open="editName.open"
    v-model:title="editName.title"
    :context-data="editName.propsModalData"
    @edit="renamePrj"
  />
</template>
<script setup>
import { ref, watch } from 'vue'
import CatalogTree from './tree.vue'
import ProjectTitle from './project-title.vue'
import ProjectModal from './new-project-modal.vue'
import {
  deleteProject,
  deleteProjectNode,
  publishProject,
  renameProject,
  useProject,
} from '@/api/catalog-personal.js'
import { useDataSourceManager } from './provide-context.js'
/**
 * 全局数据
 */
let { update } = useDataSourceManager()
let treeOperation = ref('')
let itemTree = ref(null)
// 装载已有数据
let props = defineProps({
  data: { type: Object, default: () => {} },
  hightlightChange: { type: Boolean, default: () => false },
})
// 弹窗相关
let editName = ref({
  title: '编辑项目名称',
  open: false,
  propsModalData: {
    btnType: 'edit',
    data: props.data,
  },
})
let confirmInfo = ref({
  id: 'delete',
  content: '是否确认删除？',
  title: '删除',
})
let loading = ref(false)
let open = ref(false)

// 项目间拖动时树模块也高亮
let highlightStyle = ref('')
watch(
  () => props.hightlightChange,
  newValue => {
    if (newValue) {
      /* Highlight color */
      // 上一版：#0086ff0f
      highlightStyle.value = 'background-color:hsl(206.47deg 94.44% 92.94%)'
    } else {
      highlightStyle.value = ''
    }
  },
  { deep: true, immediate: true },
)

// 树节点删除事件
function deleteNode(node) {
  open.value = true
  confirmInfo.value = {
    id: 'deleteNode',
    content: '确定要删除该项目/层级吗？',
    title: '删除',
    data: node,
  }
}
// 取消根节点添加
function resetAddRoot(node) {
  props.data.children.shift()
}
// 菜单按钮事件
function menuClick(data) {
  if (data.key == 'renamePrj') {
    editName.value.open = true
  } else if (data.key == 'usePrj') {
    console.log(data)
    open.value = true
    confirmInfo.value = {
      id: 'usePrj',
      content: '确认沿用：项目 ' + data.usePrjName + ' ?',
      title: '层级结构沿用',
      usePrjId: data.usePrjId,
    }
  } else if (data.key == 'addSub') {
    // 项目新建根子集
    console.log('新建')
    props.data.children.unshift({
      parentId: props.data.id,
      editStatus: '1',
    })
  } else if (data.key == 'publishPrj') {
    open.value = true
    confirmInfo.value = {
      id: 'publish',
      data,
      content: '确定发布该项目吗？',
      title: '发布',
    }
  } else if (data.key == 'deletePrj') {
    open.value = true
    confirmInfo.value = {
      id: 'delete',
      content: '确定要删除该项目/层级吗？',
      title: '删除',
    }
  }
}
// 弹窗二次确认
async function handleOk() {
  if (confirmInfo.value.id == 'delete') {
    // 删除项目
    loading.value = true
    try {
      let params = {
        prjId: props.data.id,
      }
      await deleteProject(params)
      await update()
      loading.value = false
      open.value = false
      message.success('删除成功。')
    } catch (e) {
      loading.value = false
      open.value = false
    }
  } else if (confirmInfo.value.id == 'publish') {
    // 发布项目
    loading.value = true
    try {
      let params = {
        prjId: props.data.id,
      }
      await publishProject(params)
      await update()
      loading.value = false
      open.value = false
      message.success('发布成功。')
    } catch (e) {
      loading.value = false
      open.value = false
    }
  } else if (confirmInfo.value.id == 'usePrj') {
    // 沿用
    loading.value = true
    try {
      let params = {
        targetId: props.data.id,
        sourceId: confirmInfo.value.usePrjId,
      }
      await useProject(params)
      await update()
      loading.value = false
      open.value = false
      message.success('沿用成功。')
    } catch (e) {
      loading.value = false
      open.value = false
    }
  } else if (confirmInfo.value.id == 'deleteNode') {
    // 删除子集（树节点）
    loading.value = true
    try {
      let params = {
        id: confirmInfo.value.data.id,
        parentId: confirmInfo.value.data.parentId,
      }
      await deleteProjectNode(params)
      await update()
      loading.value = false
      open.value = false
      message.success('删除子集成功。')
    } catch (e) {
      loading.value = false
      open.value = false
    }
  }
}
// 项目重命名
async function renamePrj(data) {
  loading.value = true
  try {
    let params = {
      prjId: props.data.id,
      newPrjName: data.title,
    }
    await renameProject(params)
    await update()
    loading.value = false
    open.value = false
    message.success('重命名成功。')
  } catch (e) {
    loading.value = false
    open.value = false
  }
}
</script>
<style scoped lang="less">
.tree-div {
  margin-top: 10px;
  // 竖着占满itemDiv剩下的高度
  // 为了限制项目之间的拖曳排序只在点击项目框时生效
  flex-grow: 1;
}
</style>
